<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字速度测试 - 中文打字练习</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['system-ui', 'sans-serif'],
                        mono: ['Consolas', 'Monaco', 'monospace']
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .typing-cursor {
                animation: blink 1s step-end infinite;
            }
            @keyframes blink {
                from, to { opacity: 1; }
                50% { opacity: 0; }
            }
            .pulse-subtle {
                animation: pulse-subtle 2s infinite;
            }
            @keyframes pulse-subtle {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.02); }
            }
            /* 防复制样式 */
            .no-select {
                -webkit-user-select: none; /* Safari */
                -ms-user-select: none; /* IE 10 and IE 11 */
                user-select: none; /* 标准语法 */
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 min-h-screen font-sans text-dark flex flex-col items-center justify-start pt-8 pb-16 px-4 md:px-6">
    <!-- 页面标题 -->
    <header class="w-full max-w-3xl text-center mb-8">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-2 text-shadow">
            <i class="fa fa-keyboard-o mr-3"></i>中文打字测试
        </h1>
        <p class="text-gray-600 text-lg md:text-xl">测试并提升您的中文打字速度和准确性</p>
    </header>
    
    <!-- 主容器 -->
    <main class="w-full max-w-3xl bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
        <!-- 测试设置 -->
        <div class="bg-gray-50 border-b border-gray-100 p-4 flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center space-x-2">
                <label for="difficulty" class="text-gray-600 font-medium">难度:</label>
                <select id="difficulty" class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <option value="easy">简单 (常用字)</option>
                    <option value="medium" selected>中等 (常用词)</option>
                    <option value="hard">困难 (复杂词汇/成语)</option>
                </select>
            </div>
            
            <div class="flex items-center space-x-4">
                <button id="restart-btn" class="flex items-center space-x-1 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-refresh"></i>
                    <span>重新开始</span>
                </button>
            </div>
        </div>
        
        <!-- 计时器和进度 -->
        <div class="p-4 bg-gray-50 border-b border-gray-100 flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center space-x-6">
                <div class="text-center">
                    <p class="text-gray-500 text-sm">时间</p>
                    <p id="timer" class="text-xl font-mono font-bold">00:00.00</p>
                </div>
                <div class="text-center">
                    <p class="text-gray-500 text-sm">速度 (字/分钟)</p>
                    <p id="cpm" class="text-xl font-mono font-bold">0</p>
                </div>
                <div class="text-center">
                    <p class="text-gray-500 text-sm">错误</p>
                    <p id="errors" class="text-xl font-mono font-bold text-danger">0</p>
                </div>
            </div>
            
            <div class="w-full md:w-auto">
                <div class="w-full md:w-48 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div id="progress-bar" class="h-full bg-secondary w-0 transition-all duration-300"></div>
                </div>
            </div>
        </div>
        
        <!-- 测试文本显示区域 - 添加防复制属性 -->
        <div id="text-display" 
             class="text-lg md:text-xl leading-relaxed mb-6 h-40 md:h-48 overflow-y-auto p-4 bg-gray-50 rounded-lg border border-gray-100 no-select"
             oncopy="return false" 
             oncut="return false" 
             onpaste="return false"
             oncontextmenu="return false">
            <!-- 文本将通过JS动态插入 -->
            <span class="opacity-50">点击下方输入框开始测试...</span>
        </div>
        
        <!-- 输入区域 -->
        <div class="relative p-6 md:p-8">
            <textarea 
                id="user-input" 
                class="w-full h-24 p-4 text-lg border-2 border-gray-200 rounded-lg focus:outline-none focus:border-primary transition-all duration-300 resize-none"
                placeholder="在此处开始输入..."
                spellcheck="false"
            ></textarea>
            <div class="absolute bottom-3 right-3 text-xs text-gray-500">
                <i class="fa fa-info-circle mr-1"></i>完成后自动提交
            </div>
        </div>
    </main>
    
    <!-- 结果弹窗 -->
    <div id="results-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-all duration-300">
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-md p-6 transform scale-95 transition-all duration-300">
            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-primary mb-2">测试结果</h2>
                <div class="w-16 h-1 bg-primary mx-auto rounded-full"></div>
            </div>
            
            <div class="grid grid-cols-2 gap-6 mb-8">
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <p class="text-gray-500 text-sm">打字速度</p>
                    <p id="result-cpm" class="text-3xl font-bold">0</p>
                    <p class="text-gray-500 text-sm">字/分钟</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <p class="text-gray-500 text-sm">准确率</p>
                    <p id="result-accuracy" class="text-3xl font-bold">0%</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <p class="text-gray-500 text-sm">用时</p>
                    <p id="result-time" class="text-2xl font-bold">00:00</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <p class="text-gray-500 text-sm">错误</p>
                    <p id="result-errors" class="text-2xl font-bold text-danger">0</p>
                </div>
            </div>
            
            <div class="flex space-x-4">
                <button id="close-result-btn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-3 rounded-lg transition-all duration-300">
                    关闭
                </button>
                <button id="new-test-btn" class="flex-1 bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-lg transition-all duration-300">
                    再试一次
                </button>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="w-full max-w-3xl mt-8 text-center text-gray-500 text-sm">
        <p>中文打字测试 &copy; 2023 | 提高您的打字效率</p>
    </footer>

    <script>
        // 中文单词库 - 按难度分级
        const wordBanks = {
            easy: [
                "的", "一", "是", "在", "不", "了", "有", "和", "人", "这",
                "中", "大", "为", "上", "个", "国", "我", "以", "要", "他",
                "时", "来", "用", "们", "生", "到", "作", "地", "于", "出",
                "就", "分", "对", "成", "会", "可", "主", "发", "年", "动",
                "同", "工", "也", "能", "下", "过", "子", "说", "产", "种",
                "面", "而", "方", "后", "多", "定", "行", "学", "法", "所",
                "民", "得", "经", "十", "三", "之", "进", "着", "等", "部"
            ],
            medium: [
                "时间", "工作", "学习", "生活", "中国", "发展", "问题", "企业",
                "社会", "政府", "人民", "服务", "经济", "文化", "教育", "研究",
                "技术", "产品", "系统", "管理", "信息", "安全", "城市", "环境",
                "公共", "健康", "医疗", "交通", "汽车", "电话", "电脑", "网络",
                "手机", "电视", "音乐", "电影", "艺术", "设计", "科学", "工程",
                "数学", "物理", "化学", "生物", "历史", "地理", "语言", "文学",
                "体育", "运动", "健康", "饮食", "睡眠", "旅行", "旅游", "美食"
            ],
            hard: [
                "循序渐进", "相辅相成", "融会贯通", "举一反三", "精益求精",
                "坚持不懈", "实事求是", "名副其实", "错综复杂", "包罗万象",
                "不可思议", "理所当然", "恍然大悟", "不知所措", "莫名其妙",
                "栩栩如生", "津津有味", "兴高采烈", "忐忑不安", "犹豫不决",
                "独一无二", "千方百计", "万无一失", "一目了然", "一览无余",
                "振振有词", "滔滔不绝", "栩栩如生", "惟妙惟肖", "名副其实",
                "错综复杂", "简明扼要", "言简意赅", "通俗易懂", "深入浅出",
                "光明磊落", "正大光明", "公正无私", "大公无私", "舍己为人"
            ]
        };

        // 全局变量
        let testText = "";
        let startTime = null;
        let timerInterval = null;
        let isTestActive = false;
        let errors = 0;
        let completedChars = 0;
        let totalChars = 0;

        // DOM元素
        const textDisplay = document.getElementById('text-display');
        const userInput = document.getElementById('user-input');
        const timerDisplay = document.getElementById('timer');
        const cpmDisplay = document.getElementById('cpm');
        const errorsDisplay = document.getElementById('errors');
        const progressBar = document.getElementById('progress-bar');
        const restartBtn = document.getElementById('restart-btn');
        const difficultySelect = document.getElementById('difficulty');
        const resultsModal = document.getElementById('results-modal');
        const resultCpm = document.getElementById('result-cpm');
        const resultAccuracy = document.getElementById('result-accuracy');
        const resultTime = document.getElementById('result-time');
        const resultErrors = document.getElementById('result-errors');
        const closeResultBtn = document.getElementById('close-result-btn');
        const newTestBtn = document.getElementById('new-test-btn');

        // 防复制措施 - 监听并阻止复制事件
        function preventCopy() {
            // 阻止文本选择
            document.addEventListener('selectstart', function(e) {
                if (e.target.closest('#text-display')) {
                    e.preventDefault();
                    return false;
                }
            });
            
            // 阻止复制
            document.addEventListener('copy', function(e) {
                if (e.target.closest('#text-display')) {
                    e.preventDefault();
                    return false;
                }
            });
            
            // 阻止剪切
            document.addEventListener('cut', function(e) {
                if (e.target.closest('#text-display')) {
                    e.preventDefault();
                    return false;
                }
            });
            
            // 阻止右键菜单
            document.addEventListener('contextmenu', function(e) {
                if (e.target.closest('#text-display')) {
                    e.preventDefault();
                    return false;
                }
            });
        }

        // 初始化测试
        function initializeTest() {
            // 重置状态
            resetTest();
            
            // 根据难度生成测试文本
            const difficulty = difficultySelect.value;
            const words = wordBanks[difficulty];
            
            // 生成约100个字符的测试文本（中文更紧凑）
            let testWords = [];
            let charCount = 0;
            
            while (charCount < 100) {
                const randomIndex = Math.floor(Math.random() * words.length);
                const word = words[randomIndex];
                testWords.push(word);
                charCount += word.length + 1; // +1 是为了空格
            }
            
            testText = testWords.join(' ');
            totalChars = testText.length;
            
            // 显示测试文本
            displayTestText();
        }

        // 显示测试文本
        function displayTestText() {
            textDisplay.innerHTML = '';
            
            // 将文本拆分为单个字符并创建span元素
            for (let i = 0; i < testText.length; i++) {
                const charSpan = document.createElement('span');
                charSpan.textContent = testText[i];
                charSpan.classList.add('transition-all-300', 'mx-[1px]');
                charSpan.dataset.index = i;
                // 为每个字符添加防复制属性
                charSpan.onselectstart = function() { return false; };
                textDisplay.appendChild(charSpan);
            }
        }

        // 重置测试
        function resetTest() {
            // 清除计时器
            if (timerInterval) {
                clearInterval(timerInterval);
                timerInterval = null;
            }
            
            // 重置状态
            startTime = null;
            isTestActive = false;
            errors = 0;
            completedChars = 0;
            
            // 重置UI
            timerDisplay.textContent = '00:00.00';
            cpmDisplay.textContent = '0';
            errorsDisplay.textContent = '0';
            userInput.value = '';
            progressBar.style.width = '0%';
            textDisplay.innerHTML = '<span class="opacity-50">点击下方输入框开始测试...</span>';
        }

        // 开始计时器
        function startTimer() {
            startTime = new Date();
            
            timerInterval = setInterval(() => {
                const currentTime = new Date();
                const elapsedTime = currentTime - startTime;
                
                // 计算分、秒、毫秒
                const minutes = Math.floor(elapsedTime / 60000);
                const seconds = Math.floor((elapsedTime % 60000) / 1000);
                const milliseconds = Math.floor((elapsedTime % 1000) / 10);
                
                // 格式化显示
                timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
                
                // 计算并更新CPM（每分钟字符数）
                updateCPM(elapsedTime);
            }, 10);
        }

        // 更新CPM显示（中文更适合按字符计数）
        function updateCPM(elapsedTime) {
            if (elapsedTime < 1000) return; // 避免除以零
            
            // 计算每分钟的字符数
            const minutesElapsed = elapsedTime / 60000;
            const cpm = Math.max(0, Math.round(completedChars / minutesElapsed));
            
            cpmDisplay.textContent = cpm;
        }

        // 处理用户输入 - 增加粘贴检测
        function handleInput() {
            // 检测是否有粘贴行为
            const input = userInput.value;
            const inputLength = input.length;
            
            // 如果输入长度突然增加很多，可能是粘贴行为
            if (inputLength - completedChars > 5 && isTestActive) {
                alert('检测到可能的粘贴行为，请手动输入以保证测试公平性');
                // 清除输入内容
                userInput.value = input.substring(0, completedChars);
                return;
            }
            
            // 开始测试（如果尚未开始）
            if (!isTestActive) {
                isTestActive = true;
                startTimer();
                displayTestText(); // 重新显示测试文本（移除提示）
            }
            
            // 重置所有字符的样式
            const charSpans = textDisplay.querySelectorAll('span');
            
            // 更新已完成的字符数
            completedChars = Math.min(inputLength, testText.length);
            
            // 更新进度条
            const progress = (completedChars / totalChars) * 100;
            progressBar.style.width = `${progress}%`;
            
            // 检查每个字符
            let newErrors = 0;
            
            for (let i = 0; i < inputLength; i++) {
                if (i >= testText.length) break; // 输入超出测试文本长度
                
                const charSpan = charSpans[i];
                
                if (input[i] === testText[i]) {
                    // 正确输入
                    charSpan.classList.remove('text-danger', 'bg-danger/10');
                    charSpan.classList.add('text-secondary', 'bg-secondary/10');
                } else {
                    // 错误输入
                    charSpan.classList.remove('text-secondary', 'bg-secondary/10');
                    charSpan.classList.add('text-danger', 'bg-danger/10');
                    newErrors++;
                }
                
                // 标记为已输入
                charSpan.classList.add('opacity-70');
            }
            
            // 未输入的字符不标记
            for (let i = inputLength; i < testText.length; i++) {
                const charSpan = charSpans[i];
                charSpan.classList.remove('text-secondary', 'bg-secondary/10', 'text-danger', 'bg-danger/10', 'opacity-70');
            }
            
            // 更新错误计数
            errors = newErrors;
            errorsDisplay.textContent = errors;
            
            // 检查是否完成测试
            if (input === testText) {
                completeTest();
            }
        }

        // 完成测试
        function completeTest() {
            // 停止计时器
            clearInterval(timerInterval);
            isTestActive = false;
            
            // 计算结果
            const endTime = new Date();
            const elapsedTime = endTime - startTime;
            const minutesElapsed = elapsedTime / 60000;
            
            // 计算CPM (字符每分钟)
            const cpm = Math.round(totalChars / minutesElapsed);
            
            // 计算准确率
            const accuracy = Math.round(((totalChars - errors) / totalChars) * 100);
            
            // 格式化时间
            const seconds = Math.floor(elapsedTime / 1000);
            const minutes = Math.floor(seconds / 60);
            const formattedTime = `${minutes.toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
            
            // 更新结果弹窗
            resultCpm.textContent = cpm;
            resultAccuracy.textContent = `${accuracy}%`;
            resultTime.textContent = formattedTime;
            resultErrors.textContent = errors;
            
            // 显示结果弹窗
            resultsModal.classList.remove('opacity-0', 'pointer-events-none');
            resultsModal.querySelector('div').classList.remove('scale-95');
            resultsModal.querySelector('div').classList.add('scale-100');
            
            // 添加完成动画效果
            textDisplay.classList.add('pulse-subtle');
        }

        // 事件监听器
        userInput.addEventListener('input', handleInput);
        
        // 监听粘贴事件
        userInput.addEventListener('paste', function(e) {
            e.preventDefault();
            alert('禁止粘贴，请手动输入以保证测试公平性');
        });
        
        restartBtn.addEventListener('click', () => {
            initializeTest();
            userInput.focus();
        });
        
        difficultySelect.addEventListener('change', initializeTest);
        
        closeResultBtn.addEventListener('click', () => {
            resultsModal.classList.add('opacity-0', 'pointer-events-none');
            resultsModal.querySelector('div').classList.remove('scale-100');
            resultsModal.querySelector('div').classList.add('scale-95');
            textDisplay.classList.remove('pulse-subtle');
        });
        
        newTestBtn.addEventListener('click', () => {
            resultsModal.classList.add('opacity-0', 'pointer-events-none');
            resultsModal.querySelector('div').classList.remove('scale-100');
            resultsModal.querySelector('div').classList.add('scale-95');
            textDisplay.classList.remove('pulse-subtle');
            initializeTest();
            userInput.focus();
        });
        
        // 点击输入框自动聚焦
        userInput.addEventListener('click', () => {
            userInput.focus();
        });

        // 初始化页面和防复制功能
        window.addEventListener('load', () => {
            preventCopy();
            initializeTest();
            userInput.focus();
        });
    </script>
</body>
</html>
